import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert, ActivityIndicator, FlatList, RefreshControl} from 'react-native';
import {Flex, Toast, Radio, WingBlank, Tabs} from '@ant-design/react-native';
import {getBankLoanPageList} from '~/api/bank';
import {connect} from 'react-redux';
const RadioItem = Radio.RadioItem;
const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
    };
};
let pagecount = 0;
let index = 1;
let size = 10;
class BankLoanList extends Component {
    static navigationOptions = {
        title: '金融产品',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);

        // 设置当前组件的属性
        this.state = {
            list: [],
            page_index: 1, //页
            page_size: 10, //每页条数
            isLoading: false, //加载
            refreshing: false,
            footer: 0, //上拉底部显示
        };
        this.getbankloan();
    }
    getbankloan() {
        getBankLoanPageList({
            page_index: this.state.page_index,
            page_size: this.state.page_size,
        }).then((r) => {
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                    footer: 0,
                });
                if (this.state.page_index === 1) {
                    pagecount = r.data.total_page_count;
                    this.setState({
                        footer: r.data.total_item_count < 10 ? 2 : 0,
                    });
                }
            }
        });
    }
    _onRefresh() {
        this.setState({footer: 0, page_index: index, page_size: size}, () => {
            this.getbankloan();
        });
    }

    //上拉加载更多
    loadData = () => {
        this.setState({isLoading: false});
        let dataArray = [];
        if (pagecount - 1 > 0) {
            pagecount = pagecount - 1;
            this.setState(
                {
                    page_index: this.state.page_index + 1,
                    footer: 1,
                },
                () => {
                    getBankLoanPageList({
                        page_index: this.state.page_index,
                        page_size: this.state.page_size,
                    }).then((r) => {
                        if (r.code === 0) {
                            dataArray = r.data.list;
                            dataArray = this.state.list.concat(dataArray);
                            this.setState({
                                list: dataArray,
                                isLoading: false,
                            });
                        }
                    });
                },
            );
        } else {
            this.setState({
                footer: 2,
            });
        }
    };

    //上拉底部显示
    genIndicator() {
        if (this.state.footer === 1) {
            return (
                <View style={styles.indicatorContainer}>
                    <ActivityIndicator style={styles.indicator} size={'large'} animating={true} />
                    <Text style={{textAlign: 'center'}}>正在加载更多</Text>
                </View>
            );
        } else if (this.state.footer === 2) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        没有更多数据了
                    </Text>
                </View>
            );
        } else if (this.state.footer === 0) {
            return (
                <View
                    style={{
                        height: 30,
                        alignItems: 'center',
                        justifyContent: 'flex-start',
                    }}>
                    <Text
                        style={{
                            color: '#999999',
                            fontSize: 14,
                            marginTop: 5,
                            marginBottom: 5,
                        }}>
                        上拉加载更多
                    </Text>
                </View>
            );
        }
    }
    _renderItem(item) {
        return (
            <View>
                <Flex
                    style={{
                        width: '100%',
                        paddingLeft: 15,
                        paddingRight: 15,
                        marginTop: 21,
                        marginBottom: 15,
                    }}
                    direction={'column'}
                    align={'start'}>
                    <Flex
                        style={{
                            width: '100%',
                        }}>
                        <Text
                            numberOfLines={1}
                            style={{
                                fontSize: 18,
                                color: '#EC4F46',
                                width: '80%',
                            }}>
                            {item.LoanName}
                        </Text>
                        <Text
                            onPress={() => {
                                this.props.navigation.push('FinancialInfo', {
                                    params: item.BankLoanID,
                                });
                            }}
                            style={{
                                width: 62,
                                height: 24,
                                backgroundColor: '#EC4F46',
                                color: 'white',
                                textAlign: 'center',
                                fontSize: 13,
                                borderRadius: 5,
                                paddingTop: 3,
                            }}>
                            详情
                        </Text>
                    </Flex>
                    <Flex
                        style={{
                            width: '100%',
                        }}>
                        <Text numberOfLines={1} style={{paddingTop: 16, width: '80%'}}>
                            {item.LoanInfo}
                        </Text>
                        <Text
                            style={{
                                color: '#EC4F46',
                                fontSize: 13,
                                borderRadius: 5,
                                paddingTop: 16,
                            }}>
                            {item.LoanState === 1 && '正常'}
                            {item.LoanState === 2 && '失效'}
                            {item.LoanState === 6 && '待审'}
                            {item.LoanState === 7 && '审核失败'}
                        </Text>
                    </Flex>
                </Flex>
                <View style={styles.textfenge} />
            </View>
        );
    }
    render() {
        return (
            <View style={{width: '100%', backgroundColor: 'white'}}>
                <FlatList
                    data={this.state.list}
                    style={{width: '100%'}}
                    showsVerticalScrollIndicator={false}
                    renderItem={(data) => this._renderItem(data.item)}
                    keyExtractor={(item, index) => index}
                    // ListHeaderComponent={this._HeaderView}
                    ListFooterComponent={() => this.genIndicator()} //上拉加载更多视图
                    onEndReached={() => {
                        this.loadData();
                    }}
                    onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数，看不到菊花加载中
                    refreshing={true}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._onRefresh();
                            }}
                        />
                    }
                />
                {/*<ScrollView>*/}
                {/*    {this.state.list.map((item) => {*/}
                {/*        return (*/}
                {/*            <View>*/}
                {/*                <Flex*/}
                {/*                    style={{*/}
                {/*                        width: '100%',*/}
                {/*                        paddingLeft: 15,*/}
                {/*                        paddingRight: 15,*/}
                {/*                        marginTop: 21,*/}
                {/*                        marginBottom: 15,*/}
                {/*                    }}*/}
                {/*                    direction={'column'}*/}
                {/*                    align={'start'}>*/}
                {/*                    <Flex*/}
                {/*                        style={{*/}
                {/*                            width: '100%',*/}
                {/*                        }}>*/}
                {/*                        <Text*/}
                {/*                            numberOfLines={1}*/}
                {/*                            style={{*/}
                {/*                                fontSize: 18,*/}
                {/*                                color: '#EC4F46',*/}
                {/*                                width: '80%',*/}
                {/*                            }}>*/}
                {/*                            {item.LoanName}*/}
                {/*                        </Text>*/}
                {/*                        <Text*/}
                {/*                            onPress={() => {*/}
                {/*                                this.props.navigation.push('FinancialInfo', {*/}
                {/*                                    params: item.BankLoanID,*/}
                {/*                                });*/}
                {/*                            }}*/}
                {/*                            style={{*/}
                {/*                                width: 62,*/}
                {/*                                height: 24,*/}
                {/*                                backgroundColor: '#EC4F46',*/}
                {/*                                color: 'white',*/}
                {/*                                textAlign: 'center',*/}
                {/*                                fontSize: 13,*/}
                {/*                                borderRadius: 5,*/}
                {/*                                paddingTop: 3,*/}
                {/*                            }}>*/}
                {/*                            详情*/}
                {/*                        </Text>*/}
                {/*                    </Flex>*/}
                {/*                    <Text numberOfLines={1} style={{paddingTop: 16}}>*/}
                {/*                        {item.LoanInfo}*/}
                {/*                    </Text>*/}
                {/*                </Flex>*/}
                {/*                <View style={styles.textfenge} />*/}
                {/*            </View>*/}
                {/*        );*/}
                {/*    })}*/}
                {/*</ScrollView>*/}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 4,
    },
});
export default connect(mapGetter)(BankLoanList);
